<template>
  <div>
    <div style="width: 100%;float:left;">
      <van-nav-bar
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <div style="width: 100%;">
      <img src="http://srhtngjmu.hn-bkt.clouddn.com/wanmai/%E7%99%BB%E5%BD%95%E9%A1%B5%E5%9B%BE%E7%89%871.png"
           width="370px">
    </div>
    <h1 align="left" style="font-weight: 400;margin-left: 20px">账号密码登录</h1>
    <p align="left" style="margin-left: 20px;color: #999999">欢迎使用家医</p>

    <div align="left" style="width: 100%;margin-top: 50px;">
      <div class="login-container">
        <p style="width: 80%;">手机号:</p>
        <el-input v-model="form.phone" placeholder="请输入手机号" style="width: 80%;margin: 10px auto;"/>
      </div>
      <div class="login-container">
        <p style="width: 80%;">密码:</p>
          <el-input v-model.number="form.password" type="password" placeholder="请输入密码" style="width: 80%;margin: 10px auto;"/>
      </div>
      <div style="width: 80%;margin: 10px auto;">
        <van-checkbox v-model="checked" style="float:left;font-size: 14px;">我已阅读并同意<span style="color: #2984f8;">《用户隐私政策》</span></van-checkbox>
        <p style="margin: 0;padding: 0;color: #2984f8;float:right;font-size: 14px" @click="towangjimima">忘记密码</p>
      </div>
      <div class="login-container" style="margin-top: 40px">
        <el-button type="primary" @click="onSubmit" style="width: 80%;margin: 10px auto;">登录</el-button>
      </div>
    </div>
    <div style="width: 80%;margin: auto;">
      <p style="color: #2984f8;float:left;" @click="tomianmi">免密登录</p>
      <p style="color: #2984f8;float:right;" @click="toRegister">注册新用户</p>
    </div>

  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      checked:'',
      form: {
        phone: '',
        password: ''
      }
    };
  },
  created() {
    this.form.phone = this.$route.query.phone;
  },
  methods: {
    toRegister(){
      this.$router.push({name: 'register', query: {phone: this.form.phone}});
    },
    towangjimima(){
      this.$router.push({name: 'wangjimima', query: {phone: this.form.phone}});
    },
    tomianmi() {
      this.$router.push({name: 'login', query: {phone: this.form.phone}});
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      if (this.form.phone == '') {
        this.$message.error("手机号不能为空");
        return;
      }
      if (this.form.password == '') {
        this.$message.error("密码不能为空");
        return;
      }
      var phone = this.form.phone;
      var reg = /^1[3-9]\d{9}$/;
      if (!reg.test(phone)) {
        this.$message.error("手机号格式不正确");
        return;
      }
      if (!this.checked) {
        this.$message.error("请先同意用户隐私政策");
        return;
      }
      this.axios.get(`http://localhost:10086/api/user/user/login2/` + this.form.phone + "/" + this.form.password).then(res => {
        if (res.data.code == 200) {
          console.log(res);
          this.$message.success("登陆成功");
          var token = res.data.data;
          localStorage.setItem("token", JSON.stringify(token));
          setTimeout(() => {
            this.$router.push('/')
          }, 666)
        } else {
          console.log(res);
          this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>

<style>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
</style>